/* Mixins */
@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin text-ellipsis-multi($lines: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  overflow: hidden;
}

/* 基础样式 */
page {
  font-size: $font-size-md;
  color: $text-color-main;
  background-color: $bg-color;
  box-sizing: border-box;
}

/* flex布局工具类 */
.flex {
  display: flex;
  &-center {
    @extend .flex;
    align-items: center;
    justify-content: center;
  }
  &-between {
    @extend .flex;
    align-items: center;
    justify-content: space-between;
  }
  &-around {
    @extend .flex;
    align-items: center;
    justify-content: space-around;
  }
  &-column {
    @extend .flex;
    flex-direction: column;
  }
}

/* 文本工具类 */
.text {
  &-center { text-align: center; }
  &-left { text-align: left; }
  &-right { text-align: right; }
  &-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &-ellipsis-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

/* 边距工具类 */
@each $space in xs, sm, md, lg, xl {
  .m-#{$space} { margin: var(--spacing-#{$space}); }
  .mt-#{$space} { margin-top: var(--spacing-#{$space}); }
  .mr-#{$space} { margin-right: var(--spacing-#{$space}); }
  .mb-#{$space} { margin-bottom: var(--spacing-#{$space}); }
  .ml-#{$space} { margin-left: var(--spacing-#{$space}); }
  
  .p-#{$space} { padding: var(--spacing-#{$space}); }
  .pt-#{$space} { padding-top: var(--spacing-#{$space}); }
  .pr-#{$space} { padding-right: var(--spacing-#{$space}); }
  .pb-#{$space} { padding-bottom: var(--spacing-#{$space}); }
  .pl-#{$space} { padding-left: var(--spacing-#{$space}); }
}